<template>
    <div class="content">
        <Panel title="联系人管理" :bodyStyle="{padding:'10px'}" :style="{height:scrollerHeight}">
            <div class="panel">
                <div class="tool">
                                    <SearchBox style="width:300px"
                                               placeholder="输入搜索关键词"
                                               v-model="value"
                                               @search="onSearch($event)">
                                        <Addon>
                                            <span v-if="value" class="textbox-icon icon-clear" title="Clear value"
                                                  @click="value=null"></span>
                                        </Addon>
                                        <Menu>
                                            <MenuItem value="contact" text="联系人搜索" iconCls="icon-ok"></MenuItem>
                                            <MenuItem value="company" text="公司搜索" iconCls="icon-ok"></MenuItem>
                                        </Menu>
                                    </SearchBox>
                    <LinkButton iconCls="icon-add" style="margin-left: 30px" @click="addNewContact">新增联系人</LinkButton>
                </div>
                <div class="panel-down">
                    <div class="tree">
                        <Tree :data="selectdata" @selectionChange="selectnode" style="height: 100%"></Tree>
                    </div>
                    <div class="data">
                        <div class="datagrid" >
                            <!--            数据表格-->
                            <DataGrid :data="data" :clickToEdit="true" selectionMode="cell"
                                      editMode="cell" :style="{height:datagridHeight,width:datagridWidth}"
                                      :columnResizing="true"
                            >
                                <GridColumn field="productNum" title="货  号" align="center"
                                            width="5%"></GridColumn>
                                <GridColumn field="productName" title="商品名称" align="center"
                                            width="25%"></GridColumn>
                                <GridColumn field="categoryName" title="商品分类" align="center" width="10%">
                                </GridColumn>
                                <GridColumn field="productSpecification" title="规格" align="center" width="20%">
                                </GridColumn>
                                <GridColumn field="material" title="成分" align="center" width="10%">

                                </GridColumn>
                                <GridColumn field="width" title="门幅cm" width="7.5%" align="center"></GridColumn>
                                <GridColumn field="weight" title="克重g/m²" width="7.5%" align="center"></GridColumn>
                                <GridColumn field="size" title="尺码" width="5%" align="center"></GridColumn>
                                <GridColumn title="操作" width="15%" align="center">
                                    <template slot="body" slot-scope="scope">
                                        <el-button @click="editMenu(scope.row)" size="small" type="success"
                                                   style="font-size: 12px;margin: 5px">编 辑
                                        </el-button>
                                        <el-button type="warning" @click="handleDelete(scope.row)" size="small"
                                                   style="font-size: 12px;margin: 5px">删 除
                                        </el-button>
                                    </template>
                                </GridColumn>

                            </DataGrid>
                            <Pagination :total="total" :pageSize="pageSize" :pageNumber="currentPage" :layout="layout1"
                                        :displayMsg="displayMsg" @pageChange="onPageChange($event)"></Pagination>
                        </div>
                    </div>
                </div>
            </div>
        </Panel>
        <Dialog ref="edit"
                :title="dialogTitle"
                :dialogStyle="{width:'550px',height:'700px'}"
                :modal="true"
                :draggable="true"
                :resizable="true">
            <Form ref="form" :model="productModel" :rules="rules" labelPosition="before" :labelWidth="80"
                  :floatingLabel="true" @validate="errors=$event" style="max-width:500px;padding: 10px">
                <FormField name="productNum" label="货号">
                    <TextBox v-model="productModel.productNum"></TextBox>
                </FormField>
                <FormField  label="商品名称">
                    <TextBox v-model="productModel.productName" name="productName" inputId="productName" v-Tooltip="getTipOpts('productName')"></TextBox>
                </FormField>
                <FormField name="categoryId" label="商品分类">
                    <ComboTree :data="selectdata" v-model="productModel.categoryId" placeholder="选择商品分类">
                        <Tree slot="tree"></Tree>
                    </ComboTree>
                </FormField>
                <FormField name="productSpecification" label="商品规格">
                    <TextBox v-model="productModel.productSpecification"></TextBox>
                </FormField>

                <div class="formline">
                    <div class="formfield">
                        <FormField name="width" label="门  幅">
                            <TextBox v-model="productModel.width"></TextBox>
                        </FormField>
                    </div>
                    <div class="formfield">
                        <FormField name="weight" label="克  重">
                            <TextBox v-model="productModel.weight"></TextBox>
                        </FormField>
                    </div>
                </div>
                <div class="formline">
                    <div class="formfield">
                        <FormField name="size" label="尺  码">
                            <TextBox v-model="productModel.size"></TextBox>
                        </FormField>
                    </div>
                    <div class="formfield">
                        <FormField name="material" label="成  分">
                            <TextBox v-model="productModel.material"></TextBox>
                        </FormField>
                    </div>
                </div>

                <FormField name="detail" label="备  注">
                    <TextBox v-model="productModel.detail" :multiline="true"
                             style="height: 200px;padding: 5px"></TextBox>
                </FormField>
            </Form>
            <div class="tools">
                <LinkButton iconCls="icon-ok" @click="addConfirm()" style="margin-right:10px">确定</LinkButton>
                <LinkButton iconCls="icon-no" @click="$refs.edit.close()" style="margin-right:10px">取消</LinkButton>
            </div>
        </Dialog>
    </div>
</template>

<script>
    import api from "../../../utils/axios/api"
    import "../../../assets/css/common.css"
    export default {
        data() {
            return {
                // 表单错误列表
                errors: {},
                total: 0,
                pageSize: 30,
                currentPage: 1,
                // 分页图标布局
                layout1: [
                    "list",
                    "sep",
                    "first",
                    "links",
                    "prev",
                    "next",
                    "last",
                    "sep",
                    "refresh",
                    "info"
                ],
                displayMsg: "显示 {from} 到 {to} 共计 {total} 项",

                // 搜索模型
                searchModel: {
                    parentId:1,
                    productName: "",
                    categoryId:null
                },

                // 0新增 1编辑
                editTag: 0,
                // 对话框标题
                dialogTitle: "新增",
                value: "",
                selectdata: [],
                data: [],
                dialogVisible: false,
                currentrow: {},
                // 表单模型
                productModel: {
                    productNum:"",
                    productId: "",
                    productName: "",
                    productSpecification: "",
                    material: "",
                    width: "",
                    weight: "",
                    size: "",
                    detail: "",
                    categoryId: 1
                },
                // 验证规则
                rules: {
                    productName: "required",
                    categoryId: "required",
                }
            }
        },
        name: "category.vue",
        computed: {
            // 滚动区高度
            // (业务需求：手机屏幕高度减去头部标题和底部tabbar的高度，当然这2个高度也是可以动态获取的)
            scrollerHeight: function () {
                return (window.innerHeight - 220) + 'px';
            },
            datagridHeight: function () {
                return (window.innerHeight - 360) + 'px';
            },
            datagridWidth: function () {
                return (window.innerWidth - 450) + 'px';
            }
        },
        created() {
            this.getProductList();
            this.getCategoryList();
        },
        mounted() {
            // 初始化关闭对话框
            this.$refs.edit.close();
        },
        methods: {
            hasError(name) {
                return this.getError(name) != null;
            },
            // 错误气泡提示
            getTipOpts(name) {
                return {
                    content: this.getError(name),
                    closed: !this.hasError(name),
                    position: "right"
                };
            },
            // 表单校验
            getError(name) {
                return this.errors[name] && this.errors[name].length
                    ? this.errors[name][0]
                    : null;
            },
            // 选择节点
            selectnode(node){
                this.searchModel.parentId=node.id;
                this.searchModel.categoryId=node.id;
                this.getProductList();
            },
            // 获取商品分类列表
            async getCategoryList() {
                let param = {
                    categoryName: ""
                };
                let {data: res} = await api.getProductCategorList(param);
                this.selectdata = this.getSelectData(res.data);
            },
            // 递归取选项
            getSelectData(data) {
                let result = [];
                data.forEach(p => {
                    let x = {};
                    x.id = p.categoryId;
                    x.text = p.categoryName;
                    if (p.children.length > 0) {
                        x.children = this.getSelectData(p.children)
                    }
                    result.push(x);
                })
                return result;
            },

            onPageChange(e) {
                this.currentPage=e.pageNumber;
                this.pageSize=e.pageSize;
                this.data=[];
                this.getProductList();
            },
            // 工具栏删除选项
            handleDelete(row) {
                let _this = this;
                _this.$confirm("确定删除吗 ?", "系统提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(async () => {
                    let param = {productId: row.productId}
                    let {data: res} = await api.deleteProduct(param);
                    if (res.code == 0) {
                        _this.$message({
                            message: res.msg,
                            type: 'success'
                        })
                        this.getProductList();
                    }
                })

            },
            // 点击搜索按钮
            onSearch(r) {
                if(r.category=="product"){
                    this.searchModel.productName = r.value;
                }else if(r.category=="productNum"){
                    this.searchModel.productNum=r.value;
                }
                this.getProductList();

            },
            // 点击行编辑按钮
            async editMenu(row) {
                this.editTag = 1;
                this.dialogTitle = "编辑商品"
                this.currentrow = row;
                let param = {
                    productId: this.currentrow["productId"]
                }
                let {data: res} = await api.getProductById(param);
                if (res.code == 0) {
                    this.productModel.productId= res.data.productId;
                    this.productModel.productName= res.data.productName;
                    this.productModel.productSpecification= res.data.productSpecification;
                    this.productModel.material= res.data.material;
                    this.productModel.width= res.data.width;
                    this.productModel.weight= res.data.weight;
                    this.productModel.size= res.data.size;
                    this.productModel.detail= res.data.detail;
                    this.productModel.categoryId= res.data.categoryId;
                }
                this.$refs.edit.open();
            },

            // 获取所有商品列表
            async getProductList() {
                let param = {
                    parentId:this.searchModel.parentId,
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                    productName: this.searchModel.productName,
                    categoryId: this.searchModel.categoryId,
                    productNum:this.searchModel.productNum
                };
                let {data: res} = await api.getProductList(param);

                this.data = res.data.records;
                this.pageSize = res.data.size;
                this.currentPage = res.data.current;
                this.total = res.data.total;
            },
            addNewContact() {
                let _this = this;
                _this.editTag = 0;
                _this.dialogTitle = "新增联系人";
                _this.resetForm();
                _this.$refs.edit.open();
            },


            // 对话框确认按钮
            addConfirm() {
                let _this = this;
                _this.$refs.form.validate(async () => {
                    let res = null;
                    let param = {
                        productId: this.productModel.productId,
                        categoryId: this.productModel.categoryId,
                        productName: this.productModel.productName,
                        productSpecification: this.productModel.productSpecification,
                        material: this.productModel.material,
                        width: this.productModel.width,
                        weight: this.productModel.weight,
                        size: this.productModel.size,
                        detail: this.productModel.detail
                    }
                    if (this.editTag == 1) {
                        res = await api.updateProduct(param);
                    } else {
                        res = await api.addProduct(param);
                    }
                    let data = res.data;
                    this.$refs.edit.close();
                    if (data.code == 0) {
                        _this.$message({
                            message: data.msg,
                            type: "success"
                        });
                        this.getProductList();
                    }
                    this.resetForm();
                })


            },
            //解决重置表单时报 'resetFields' of undefined的错
            resetForm() {
                this.productModel.productId = "";
                this.productModel.productName = "";
                this.productModel.productSpecification = "";
                this.productModel.material = "";
                this.productModel.width = "";
                this.productModel.weight = "";
                this.productModel.size = "";
                this.productModel.detail = "";
                this.productModel.categoryId = 1;
            },

            // 删除当前行
            deleterow(row) {
                console.log("1211");
                let _this = this;
                _this.$confirm("确定删除吗 ?", "系统提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(async () => {
                    let param = {
                        id: row.id
                    }
                    let {data: res} = await api.deleteCategory(param);
                    if (res.code == 0) {
                        _this.$message({
                            message: res.msg,
                            type: "success"
                        });
                        _this.getCategoryList();
                    }
                })

            }

        }
    }
</script>

<style scoped lang="scss">
    .content {
        padding: 10px;
        .panel{
            .tool{
                padding: 10px;
                height: 50px;
            }
            .panel-down{
                display: flex;
                .tree{
                    border: 1px #e3e3e3 solid;
                    width: 180px;
                    margin-right: 10px;
                }
                .data{
                   .datagrid{

                   }
                }
            }

        }



    }

    .formline {
        display: flex;

        .formfield {
            margin-left: 10px;
        }
    }

    .tools {
        display: flex;
        justify-content: flex-end;

    }

</style>